import React from 'react';
import {connect} from 'dva';
import { List } from 'antd-mobile';
import {FlatList,Text,View} from 'react-native';
import styles from './Classsort.css';

const Item = List.Item;
const Brief = Item.Brief;
class Classsort extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      sortlist1 : [
        {text:'全部',ischoose:true,order:1},
        {text:'数学奥赛',ischoose:false,order:2},
        {text:'英语口语',ischoose:false,order:3},
        {text:'地生会考',ischoose:false,order:4},
        {text:'英语听力',ischoose:false,order:5},
        {text:'物理竞赛',ischoose:false,order:6},
        {text:'信息学竞赛',ischoose:false,order:7},
        {text:'化学竞赛',ischoose:false,order:8}
      ],
      nowsortlist1text:'全部',
      sortlist2 : [
        {text:'全部',ischoose:true,order:1},
        {text:'八年级',ischoose:false,order:2},
        {text:'小升初',ischoose:false,order:3},
        {text:'幼儿园升小学',ischoose:false,order:4},
        {text:'九年级',ischoose:false,order:5},
        {text:'高中',ischoose:false,order:6},
      ],
      nowsortlist2text:'全部',
      classlist:[
        {
          name:'python入门三十天课程',
          brief:'python学习适合高中生的最佳选择',
          gotosrc:NaN
        },
        {
          name:'JAVA入门三十天课程',
          brief:'JAVA入门由此处一路向前',
          gotosrc:NaN
        },
        {
          name:'python入门三十天课程',
          brief:'python学习适合高中生的最佳选择',
          gotosrc:NaN
        },
        {
          name:'JAVA入门三十天课程',
          brief:'JAVA入门由此处一路向前',
          gotosrc:NaN
        },
        {
          name:'python入门三十天课程',
          brief:'python学习适合高中生的最佳选择',
          gotosrc:NaN
        },
        {
          name:'JAVA入门三十天课程',
          brief:'JAVA入门由此处一路向前',
          gotosrc:NaN
        }
      ],
    }
  }
  sortlist1change(e) {
    let currenttext = e.target.innerHTML;
    if (currenttext === this.state.nowsortlist1text) {
      return;
    }
    let tempsortlist = this.state.sortlist1;
    let sortlist = tempsortlist.map(
      function (item) {
        item.text === currenttext ? item.ischoose = true : item.ischoose = false;
        return item;
      }
    );
    this.setState({
      sortlist1 : sortlist,
      nowsortlist1text : currenttext
    })
  }
  sortlist2change(e) {
    let currenttext = e.target.innerHTML;
    if (currenttext === this.state.nowsortlist2text) {
      return;
    }
    let tempsortlist = this.state.sortlist2;
    let sortlist = tempsortlist.map(
      function (item) {
        item.text === currenttext ? item.ischoose = true : item.ischoose = false;
        return item;
      }
    );
    this.setState({
      sortlist2 : sortlist,
      nowsortlist2text : currenttext
    })
  }
  componentDidMount() {
  }
  render(){
    let classlist = this.state.classlist.map((item) => (
          <Item multipleLine arrow="horizontal">
            {item.name} <Brief>{item.brief}</Brief>
          </Item>
        ))
    return (
      <div className={styles.taglistbox}   style={{flex: 1, flexDirection: 'column'}}>
        <FlatList
          className={styles.flatlistbox}
          data = {this.state.sortlist1}
          showsHorizontalScrollIndicator={false}
          horizontal = {true}
          renderItem = {({item}) => (
            <View
              className={item.ischoose?styles.bottomalive:' '+styles.basicstyle}
              onClick={(e) => this.sortlist1change(e)}
            >
              <Text>{item.text}</Text>
            </View>
          )}
        />
        <FlatList
          className={styles.flatlistbox}
          data = {this.state.sortlist2}
          showsHorizontalScrollIndicator={false}
          horizontal = {true}
          renderItem = {({item}) => (
            <View
              className={item.ischoose?styles.bottomalive:' '+styles.basicstyle}
              onClick={(e) => this.sortlist2change(e)}
            ><Text>{item.text}</Text></View>
          )}
        />
        <br />
        <List>
          {classlist}
        </List>
      </div>
    )
  }
}

Classsort.propTypes = {
};
// eslint-disable-next-line
function mapStateToProps() {
}

export default connect()(Classsort);
